<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div>
    <div class="head-background">
        <img class="logo" src="images/logo.png" alt="">
    </div>
    <div class="nav">
        <div class="nav-content">
            <div class="nav-left">
                <i class="location">
                    <img src="images/location.png" alt="">
                </i>&nbsp;
                <span class="text first">深圳</span>
                <span class="text">切换</span>
            </div>
            <div class="nav-center">
            <span>首页</span>
            <span>咨询</span>
            <span>测评</span>
            <span>商城</span>
                <div class="nav-right">
                    <div class="adm">
                        <img src="images/adm.png" >
                    </div>&nbsp;
                    <span>个人中心</span>
                </div>
            </div>
        </div>
    </div>   
    <div class="content">
        <div class="content-title">
            <span>首页</span>
            <span>></span>
            <span>预防装修污染</span>
            <span>></span>
            <span>材料库</span>
        </div>
        <div class="content-text">
            <p>
                <span class="color">类别</span>
                <span>全部</span>
                <span class="vary">地板</span>
                <span>涂料</span>
                <span>墙纸</span>
                <span>瓷砖</span>
                <span>粘胶剂</span>
                <span>油漆</span>
                <span>家具</span>
                <span>板材</span>
                <span>饰品</span>
                <img src="images/indexSelect.png" alt="">
            </p>        
            <p>
                <span class="color">类别</span>
                <span>全部</span>
            </p>          
            <p>
                <span class="color">材质</span>
                <span>全部</span>
                <span class="vary">实木</span>
                <span>复合</span>
                <span>强化</span>
                <span>其他</span>
            </p>              
            <p>
                <span class="color">品牌</span>
                <span>全部</span>
                <span class="vary">圣象</span>
                <span>大自然</span>
                <span>生活家</span>
                <span>北美枫情</span>
                <span>德尔</span>
                <span>博典</span>
                <span>船王</span>
            </p>    
        </div>        
        <div class="detail">
            <div class="detail-left">
                <ul class="wrap-font">
                    <li class="font">发布时间
                        <img src="images/downicon.png" alt="">&nbsp; 
                    </li>
                    <li class="font">价格 
                        <img src="images/upicon.png" alt="">&nbsp;
                    </li>
                    <li class="font">环保节能
                        <img src="images/upicon.png" alt="">
                    </li>
                </ul>
            </div>
            <div class="detail-center">
                <div class="search-text">
                    <input type="text" class="search">
                    <button class="btn">搜索</button>
                </div>
            </div>
            <div class="detailright">
                <ul class="wrap-hang">
                    <img class="wenhao" src="images/wenhao.png" alt="">
                    <li class="hang">了解家居医生建材环保评级标准</li>
                </ul>
            </div>
        </div>   
        <div class="donghua">
            <div class="donghua-top">
                <div class="row">
                    <div class="row1">
                        <img src="images/data_image.png" alt="">
                        <p>德尔&nbsp;&nbsp;&nbsp;都市系列3001</p>
                        <p>木地板 - 复合地板</p>
                        <p>单位： 128元/㎡</p>
                        <p><strong>环保级别： B （可以使用）</strong></p>
                    </div>
                </div>
                <div class="line">
                    <div class="line2">
                        <img src="images/data_image.png" alt="">
                        <p>德尔&nbsp;&nbsp;&nbsp;都市系列3001</p>
                        <p>木地板 - 复合地板</p>
                        <p>单位： 128元/㎡</p>
                        <p class="p2"><strong>环保级别： B</strong> （可以使用）</p>
                    </div>
                </div>
                <div class="line">
                    <div class="line2">
                        <img src="images/data_image.png" alt="">
                        <p>德尔&nbsp;&nbsp;&nbsp;都市系列3001</p>
                        <p>木地板 - 复合地板</p>
                        <p>单位： 128元/㎡</p>
                        <p class="p2"><strong>环保级别： B</strong> （可以使用）</p>
                    </div>
                </div>
                <div class="line">
                    <div class="line2">
                        <img src="images/data_image.png" alt="">
                        <p>德尔&nbsp;&nbsp;&nbsp;都市系列3001</p>
                        <p>木地板 - 复合地板</p>
                        <p>单位： 128元/㎡</p>
                        <p class="p2"><strong>环保级别： B</strong> （可以使用）</p>
                    </div>
                </div>
            </div>
            <div class="donghua-buttom">
                <div class="line">
                    <div class="line2">
                        <img src="images/data_image.png" alt="">
                        <p>德尔&nbsp;&nbsp;&nbsp;都市系列3001</p>
                        <p>木地板 - 复合地板</p>
                        <p>单位： 128元/㎡</p>
                        <p class="p2"><strong>环保级别： B</strong> （可以使用）</p>
                    </div>
                </div>
                <div class="line">
                    <div class="line2">
                        <img src="images/data_image.png" alt="">
                        <p>德尔&nbsp;&nbsp;&nbsp;都市系列3001</p>
                        <p>木地板 - 复合地板</p>
                        <p>单位： 128元/㎡</p>
                        <p class="p2"><strong>环保级别： B</strong> （可以使用）</p>
                    </div>
                </div>
                <div class="line">
                    <div class="line2">
                        <img src="images/data_image.png" alt="">
                        <p>德尔&nbsp;&nbsp;&nbsp;都市系列3001</p>
                        <p>木地板 - 复合地板</p>
                        <p>单位： 128元/㎡</p>
                        <p class="p2"><strong>环保级别： B</strong> （可以使用）</p>
                    </div>
                </div>
                <div class="line">
                    <div class="line2">
                        <img src="images/data_image.png" alt="">
                        <p>德尔&nbsp;&nbsp;&nbsp;都市系列3001</p>
                        <p>木地板 - 复合地板</p>
                        <p>单位： 128元/㎡</p>
                        <p class="p2"><strong>环保级别： B</strong> （可以使用）</p>
                    </div>
                </div>
            </div>
            <div class="ye">
                <button class="page">上一页</button>
                    <a href="#">1</a>
                    <a href="#" style="text-decoration: underline;color: orange;">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>
                <button class="page">
                    下一页
                </button>&nbsp;&nbsp;&nbsp;&nbsp;
                共有10页，去第
                <input class=black type="text">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页
                <button class="ok">
                    确定
                </button>
            </div>
        </div>
        <div class="code">
            <div class="code-content">
                <div class="code-pic">
                    <img src="images/small_weixin.png" alt="">
                </div>
                <div class="code-text">
                    <p class="code-p">建材检测 需求反馈</p>
                    <p>亲爱的用户，我们正在不断的完善和更新建材库，<br>
                    若没有找到您想要的材料信息，请将您想测的建材告诉我们。</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="feet">
        <div class="foot">
            <div class="foot-left">
                <img src="images/footerLogo.png" alt="">
                <p><strong>为室内环境健康把好每一关</p>
                <p>家居医生效力于中国人的家居健康问题，通过专业的技术研究</p>
                <p>和测评，倾力协助大众打造绿色、环保的人居生活环境。</p>
            </div>
            <div class="footer-both">
                <div >
                    <div class="foot-center">
                        <div>
                            <p>关于我们</p>
                            <p>联系我们</p>
                            <p>加入我们</p>
                        </div>
                        <div>
                            <p>版权说明</p>
                            <p>用户隐私</p>
                            <p>免费申明</p>
                        </div>
                    </div>
                </div>
                <div class="foot-right">
                    <div class="footer-right">
                        <div class="foot-pic">
                            <img src="images/weixin2.png" alt="">
                        </div>
                        <span>官方微信</span>
                    </div>
                    <div class="footer-right">
                        <div class="foot-pic">
                            <img src="images/tianmao.png" alt="">
                        </div>
                        <span>天猫旗舰店</span>
                    </div>
                    <div class="footer-right">
                        <div class="foot-pic">
                            <img src="images/shop.png" alt="">
                        </div>
                        <span>有赞商城</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <hr size="1px" color="white">
    </div>
    <div class="footer-text">
        <p>深圳建筑科学研究股份有限公司 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家居医生网</p>
        <p>粤ICP备08011321号 @Copyright All Rights Reserved</p>
    </div>
</div>
</body>
</html>